<template>
	<view class="main-box">
		<view class="content-body">
			<view v-show="current!==2" class="banner box-shadow">
				<u-image width="100%" height="100%" :src="src" />
			</view>
			<u-card :border-radius="10" box-shadow="2px 2px 6px rgba(0, 0, 0, .3)" class="form-box">
				<template #head>
					<view class="">
						<u-steps :list="numList" :current="current" mode="number" />
					</view>
				</template>
				<template #body>
					<view class="">
						<view class="">
							<u-form ref="form1" :model="form" :label-position="current==2?'top':'left'">
								<view v-if="current==0">
									<u-form-item prop="name">
										<u-input v-model="form.name" :border="true" placeholder="商户名称" />
									</u-form-item>
									<u-form-item prop="name">
										<u-input v-model="form.label" :border="true" type="select" placeholder="所属行业"
											@click="show=true" />
										<u-select v-model="show" :list="industryList" @confirm="confirm" />
									</u-form-item>
									<u-form-item prop="city">
										<u-input v-model="form.city" :border="true" type="select" placeholder="所属城市"
											@click="cityShow=true" />
										<u-select v-model="cityShow" :list="cityList" @confirm="cityConfirm" />
									</u-form-item>
									<u-form-item prop="code">
										<u-input v-model="form.code" :border="true" placeholder="获取经纬度" />
										<u-button type="warning" size="medium" @click="getLocation">
											<u-icon name="xingzhuang3kaobei" custom-prefix="custom-icon"
												style="padding-right: 10rpx;" size="40" />获取经纬度
										</u-button>
									</u-form-item>
									<u-form-item prop="intro">
										<u-input v-model="form.intro" :border="true" placeholder="负责人姓名" />
									</u-form-item>
									<u-form-item prop="password">
										<u-input v-model="form.password" :border="true" placeholder="负责人手机号" />
									</u-form-item>
								</view>

								<view v-if="current==1" class="upload-box">
									<u-upload :action="action" width="500rpx" upload-text="上传开户人身份证" max-count="1"
										:multiple="false" :file-list="form.fileList" />
									<u-upload :action="action" width="500rpx" upload-text="上传开户人银行卡" max-count="1"
										:multiple="false" :file-list="form.fileList1" />
								</view>

								<view v-if="current==2">
									<u-form-item prop="intro" label="开户银行">
										<u-input v-model="form.intro" :border="true" placeholder="回写,可修改" />
									</u-form-item>
									<u-form-item prop="intro" label="开户支行">
										<u-input v-model="form.intro" :border="true" placeholder="回写,可修改" />
									</u-form-item>
									<u-form-item prop="intro" label="开户省市">
										<u-input v-model="form.intro" :border="true" placeholder="回写,可修改" />
									</u-form-item>
									<u-form-item prop="intro" label="开户人">
										<u-input v-model="form.intro" :border="true" placeholder="回写,可修改" />
									</u-form-item>
									<u-form-item prop="intro" label="身份证号码">
										<u-input v-model="form.intro" :border="true" placeholder="回写,可修改" />
									</u-form-item>
									<u-form-item prop="intro" label="银行卡号">
										<u-input v-model="form.intro" :border="true" placeholder="回写,可修改" />
									</u-form-item>
								</view>
							</u-form>
						</view>
					</view>
				</template>
				<template #foot>
					<view class="">
						<u-button type="primary" @click="submit">{{ current==2?'开通支付':'下一步' }}</u-button>
					</view>
				</template>
			</u-card>
		</view>

		<view class="foot">
			<foot-box />
		</view>
	</view>
</template>
<script setup name='fillInfo'>
	import {
		reactive,
		toRefs,
		ref,
		getCurrentInstance
	} from 'vue'
	import {
		onLoad,
		onReady
	} from '@dcloudio/uni-app'
	import footBox from '@/components/foot-box/index.vue'

	const {
		proxy
	} = getCurrentInstance()
	const src = ref('/static/images/cs.png')

	const current = ref(0)
	const numList = ref([{
			name: '商户信息'
		},
		{
			name: '结算信息'
		},
		{
			name: '信息确认'
		}
	])

	const action = ref('http://www.example.com/upload')

	const form = ref({})
	const form1 = ref()
	const rules = ref({
		name: [{
			required: false,
			message: '请输入姓名',
			trigger: ['blur', 'change']
		}]
	})

	const show = ref(false)
	const industryList = ref([{
			value: '1',
			label: '江'
		},
		{
			value: '2',
			label: '湖'
		}
	])
	const confirm = (e) => {
		console.log('e==>', e)
	}

	const cityShow = ref(false)
	const cityList = ref([{
			value: '1',
			label: '福州'
		},
		{
			value: '2',
			label: '泉州'
		}
	])
	const cityConfirm = (e) => {
		console.log('e==>', e)
	}

	const getLocation = () => {
		proxy.$System.getLocation().then(res => {
			console.log('getLocation:', res)
		})
	}

	const submit = () => {
		let check = false
		proxy.$refs.form1.validate(valid => {
			check = valid
		})
		if (check || current.value === 1) {
			current.value < 2 ? current.value++ : ''
			console.log('验证通过')
		} else {
			console.log('验证失败')
		}
	}

	onLoad((options) => {
		console.log('页面加载时的参数：', options)
	})
	onReady(() => {
		proxy.$refs.form1.setRules(rules.value)
	})
</script>
<style lang='scss' scoped>
	@import "../../common/index.css";

	.upload-box {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
	}

	:deep(.u-form-item) {
		line-height: 1rem;
	}
</style>